<template>
  <view class="check-in-guide">
    <view class="apartment-introduce" v-for="(item, idx) in guideDataList" :key="idx">
      <view class="apartment-introduce-title">
        <h4> {{ item.title }} </h4>
      </view>
      <view class="apartment-introduce-content" v-for="(subItem, index) in item.contentList" :key="index">
        <view class="introduce" v-if="subItem.content !== null || item.title === '操作指南'">
          <text class="title">{{ subItem.title }}</text>
          <text class="content">{{ subItem.content }}</text>
        </view>
        <none-data v-else/>
      </view>
      <view  v-if="item.title === '操作指南'" >
        <!-- {{  item.content.children.find(child => child.filedName === '视频')?.disposeResourceUrl }} -->
        <video
            id="checkInGuideVideo"
            ref="checkInGuideVideoRef"
            style="width: 100%;"
            :src="item.content.children.find(child => child.filedName === '视频')?.disposeResourceUrl"
            controls
            @error="videoErrorCallback"
            @play="videoPlayCallback"
            @fullscreenchange="videoFullScreenChangeCallback"
            :poster="item.content.children.find(child => child.filedName === '图片')?.disposeResourceUrl"
            object-fit="cover"
        />
      </view>
    </view>
  </view>
</template>
<script setup>
import {ref} from 'vue'
import {onLoad} from "@dcloudio/uni-app";
import {getCheckInGuideInfoApi} from "@/package_kuafu_apartment/pages/api/check-in-guide";
import {getDictConfigListByType} from "@/package_kuafu_apartment/pages/api/home";
const checkInGuideVideoRef = ref(null)
const videoErrorCallback = (e) => {
  uni.showModal({
    content: e.target.errMsg,
    showCancel: false
  })
}
/**
 * 视频播放按钮事件回调
 */
const videoPlayCallback = () => {
  let videoContext = uni.createVideoContext('checkInGuideVideo', checkInGuideVideoRef.value)
  videoContext.requestFullScreen()
}
/**
 * 视频全屏退出暂停播放
 * @param e
 */
const videoFullScreenChangeCallback = e => {
  if (!e.detail.fullscreen) {
    uni.createVideoContext('checkInGuideVideo', checkInGuideVideoRef.value).pause()
  }
}
const guideDataList = ref([])
const getCheckInGuideInfo = async () => {
  const res = await getCheckInGuideInfoApi()
  const {code, data} = res || {}
  if (code === 200) {
    Object.keys(data).forEach(key => {
      guideDataList.value.push({
        title: key,
        contentList: data[key]
      })
    })
    await getOperationGuideData()
  }
}
const getOperationGuideData = async () => {
  const res = await getDictConfigListByType('1790210450500628482')
  const {code, data} = res
  if (code === 200) {
    const operationGuideData = data.find(item => item.filedName === '操作指南')
    guideDataList.value.push({
      title: operationGuideData.filedName,
      content: {...operationGuideData}
    })
  }
}
onLoad(() => {
  getCheckInGuideInfo()
})
</script>
<style scoped lang=less>
@import './style/check-in-guide.less';
</style>
